import React, {useRef, useState} from "react";
import {defaultPagination, paginationTool} from "@/utils/util";
import {useMount, useRequest} from "ahooks";

import ProTable from "@ant-design/pro-table";
import {Link} from "@umijs/preset-dumi/lib/theme";
import {PlusOutlined} from "@ant-design/icons";

import {
  editDetailsVideo,
  findByPageDetails,
  findByPageList,
  findByVideoCategorySelectList
} from "@/services/ant-design-pro/video";
import {FormInstance} from "@ant-design/pro-form";

import FormModalBtn from "@/components/FormModalBtn";
import MyUpload from "@/components/MyUpload";
import {FormFieldType, ProFormColumnsType} from "@ant-design/pro-form/lib/components/SchemaForm/typing";
import {history} from "@@/core/history";
import {PageHeader} from "antd";



const VideoShow :React.FC = () => {

  const [masterId,setMasterId] = useState ( 0 );
  const [masterName,setMasterName] = useState ( );
  const formRef= useRef<FormInstance> ();
  const columnsForm:ProFormColumnsType<any,FormFieldType> = [
    {
      title: '视频编号',
      dataIndex: 'id',
      search: false,
     fieldProps:{
        hidden:true
     },
      formItemProps: {
        hidden: true
      }
    },
    {
      title: '视频masterId',
      dataIndex: 'masterId',
      initialValue:masterId,
      search: false,
      fieldProps:{
        hidden:true
      },
      formItemProps: {
        hidden: true
      }
    },


    {
      title: '视频名称',
      dataIndex: 'name',
      fieldProps: {
        required: true
      },
      formItemProps: {
        required: true
      }
    },
    {
      title: '视频URL',
      dataIndex: 'url'},
    {
      title: '视频',
      dataIndex: 'videoId',
      valueType: "upload",
      renderFormItem:()=>{
        // @ts-ignore
        return <MyUpload  type={2} onChange={(imageId:number,url:string) => {
          formRef.current?.setFieldValue ( "videoId", imageId );
          formRef.current?.setFieldValue ( "url", url );
          return imageId;
        }}/>
      },

    }
  ];
  const columns = [
    {
      title: '视频编号',
      dataIndex: 'id',
      search: false,
    },
    {
      title: '视频名称',
      dataIndex: 'name',
    },
    {
      title: '赞数',
      dataIndex: 'likeCount',
      search: false,
      valueType: 'tag',
    },
    {
      title: '显示计数',
      dataIndex: 'viewCount',
      search: false,
    },
    {
      title: '评价',
      dataIndex: 'rate',
      search: false,
      valueType: "rate",

      fieldProps: {
        count:10
      },

    },
    {
      title: '时间',
      dataIndex: 'createDate',
      valueType: 'dateTime',
      hideInSearch: true,
    },

    {
      title: '操作',
      width: '164px',
      key: 'option',
      valueType: 'option',
      render: (_: any, row: { name: string; id: any; }, index: any, action: any) => [
        <FormModalBtn onChange={refresh} request={editDetailsVideo} title={row?.name} formRef={formRef} initialValues={row} columns={columnsForm} btnText={"编辑"}/>
        ,
        <Link key="link" to={`/video/show?id=${row.id}`}>
          详细
        </Link>,
      ],
    },
  ];

  const [pagination, setPagination] = useState<API.Pagination> ( defaultPagination () );
  const {
    run: fetchByPageList,
    refresh,
    data: dataList,
    loading,
  } = useRequest ( findByPageDetails, {
    debounceWait: 100,
    manual: true,
  } );

  useMount ( () => {
 // @ts-ignore
    let id:number=  parseInt( history.location.query?.id)
    // @ts-ignore
    setMasterName(history.location.query?.name)
    setMasterId(id)
    fetchByPageList ({masterId: id});
  } );

  return (
    <ProTable
      search={false}
      headerTitle={
        <PageHeader
          className="site-page-header"
          onBack={() => window.history.back ()}
          title={masterName}
          subTitle={""}
        />
      }
      onDataSourceChange={(d) => {
        console.log ( 'onDataSourceChange', d );
      }}
      onLoad={(d) => {
        // 数据加载完操作
        console.log ( 'onDataSourceChange', d );
      }}
      toolBarRender={() => [
        <FormModalBtn onChange={refresh} request={editDetailsVideo} title={masterName} formRef={formRef} initialValues={{masterId:masterId}} columns={columnsForm} btnText={"添加"}/>
      ]}
      dataSource={dataList?.data?.list}
      loading={loading}
      pagination={paginationTool ( pagination, dataList?.data?.total, (data1: API.Pagination) => {
        setPagination ( data1 );

        fetchByPageList ( {...data1,masterId: masterId} );
      } )}

      cardBordered={true}
      columns={columns}
    ></ProTable>
  );
}
export  default  VideoShow;
